<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>BI Component - Top Banner</title>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/style_reset.css" />
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/comp_banner.css" />

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->

    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var theme = BOI.theme;

        var properties = { //REQUIRED
            title: "Your Project Title Goes Here",
            source: "<%=url%>",
            width: "100%",
            height: "70",
            username: "User Name"
        };
        window.onload = function () {
            //sample registeration for an event
            //register listener function for an event
        }
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            //example to set property values to dom elements
            refreshProperties();
            properties.username = '<%=name%>';
            renderImg(properties.title, properties.source, properties.width, properties.height, properties.username);
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
            renderImg(properties.title, properties.source, properties.width, properties.height, properties.username);
        };
        $(document).ready(function () {
        });
        renderImg = function (title, source, width, height, username) {
            $('.header').css({ 'background-image': 'url(' + "<%=url%>" + ')' });
            $('.header').width(width);
            $('.header').height(height);
            $('.header .title').html(title);
            $('.header .welcome span').html(username);
        };
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            // refreshProperties();
        });
    </script>
</head>
<body  style="overflow:hidden;" >
    <div class="comp-banner" style="background-image:url('<%=url%>')">
        <div class="header">
            <h1 class="title">Your Project Title Goes Here</h1>
            <div class="welcome">
                <p>
                    Welcome&nbsp<span>
                    </span>
                </p>
            </div>
            <div class="aramco-logo">
                 <img src="../../<%=theme%>/images/aramco-logo.png" />
            </div>
        </div>
    </div>
</body>
</html>